<template>
  <div class="tab-container">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="员工" name="userManage">
<!--        <userManage ref="userManage"></userManage>-->
      </el-tab-pane>
      <el-tab-pane label="部门" name="departmentList">
<!--        <departmentList ref="departmentList"></departmentList>-->
      </el-tab-pane>
      <el-tab-pane label="职称" name="workTitleList">
<!--        <workTitleList ref="workTitleList"></workTitleList>-->
      </el-tab-pane>
      <el-tab-pane label="组" name="groupList">
<!--        <groupList ref="groupList"></groupList>-->
      </el-tab-pane>
      <el-tab-pane label="权限" name="permissionsList">
<!--        <permissionsList ref="permissionsList"></permissionsList>-->
      </el-tab-pane>
    </el-tabs>
    <keep-alive>
      <component :is="activeName" :ref="activeName"></component>
    </keep-alive>
  </div>
</template>

<script>
  import userManage from './components/userManageList'
  import departmentList from './components/departmentList'
  import workTitleList from './components/workTitleList'
  import groupList from './components/groupList'
  import permissionsList from './components/permissionsList'
  export default {
    name: "index.vue",
    components: {
      userManage,
      departmentList,
      workTitleList,
      groupList,
      permissionsList
    },
    data() {
      return {
        activeName: 'userManage'
      }
    },
    mounted() {
      this.$refs[this.activeName].search()
    },
    methods: {
      handleClick (val) {
        let refName = val.name
        this.$nextTick(_ => {
          this.$refs[refName].search()
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .tab-container {
    /deep/ .el-tabs__nav {
      background-color: white !important;
    }
  }
</style>
